<template>
	<view class="bg" :style="{'background': info?.bg?.bg_color}">
		<!-- <up-navbar autoBack bgColor="transparent" title="活动"></up-navbar> -->
		<view class="activity-top" :style="backgroundTopStyle"></view>
		<view @click="ruleShow = true" class="rule">活动规则</view>
		<view class="activity-center pad-left-right-30">
			<view class="text-center font-35 color-white font-w-600">{{info.name}}</view>
			<view class="text-right mar-top-20 font-28">积分: {{overview?.account?.amount ?? 0}}</view>
			<!-- 优惠券 -->
			<view class="centerY betweenX mar-top-50">
				<view class="coupon-box" v-for="(item,inx) in exchanges" :key="inx">
					<image src="/static/image/coupon2.png" mode=""></image>
					<view class="coupon-view betweenX centerY">
						<view>
							<view class="title font-22">{{item.title}}</view>
							<view class="font-24 color-theme mar-top-5">{{item.cost_points}}积分</view>
							<!-- <view class="font-24 color-646464 mar-top-5">数量： {{item.sold_cnt}}/{{item.stock}}</view> -->
						</view>
						<view @click="hanldeReceive(item)" class="coupon-button centerXY">领取</view>
					</view>
				</view>
				<image v-if="exchNum>2" @click="hanldeMore" class="right" src="/static/image/right.png" mode=""></image>
			</view>
			<view class="bg-white flex radius16 mar-top-30" v-for="(item,inx) in task_gifts" :key="inx">
				<view class="reward pad-20 centerXY">奖励{{inx+1}}</view>
				<view class="pad-20 right-text font-28 color-text">{{item.title}}</view>
			</view>

			<view class="text-center font-32 color-white mar-top-50">
				活动截止时间: {{timeFormat(info.end_at, 'yyyy年mm月dd日 hh时MM分ss秒')}}
			</view>
			<view class="mar-top-50">
				<template v-if="isjoin == 1">
					<!-- #ifdef MP-WEIXIN -->
					<button class="custom-button" open-type="share">
						<view class="button">立即邀请</view>
					</button>
					<!-- #endif -->
					<view @click="hanldeInvitLog" class="button2 mar-top-20">收益明细</view>
				</template>
				<view v-else @click="hanldeActivityJoin" class="button">立即参与</view>
			</view>
			<view class="text-center color-white mar-top-80 font-28">活动结束积分会清零，请及时兑换奖品。</view>
		</view>
		<view class="activity-bottom" :style="backgroundBottomStyle"></view>

		<up-popup :closeOnClickOverlay="false" :customStyle="{width:'600rpx'}" bgColor="transparent" :show="ruleShow"
			@close="ruleShow = false" mode="center">
			<view class="rule-box">
				<image src="/static/image/rule.png" mode=""></image>
				<view class="ruleText">
					<view class="text-center">活动规则</view>
					<view class="mar-top-25">
						<text class="font-28 ">{{info.rule_text}}</text>
					</view>
				</view>
			</view>
			<view class="centerXY">
				<view class="close" @click="ruleShow = false">
					<image src="/static/image/close.png" mode=""></image>
				</view>
			</view>
		</up-popup>
	</view>
</template>

<script setup>
	import { ref, computed } from 'vue';
	import { activityDetail, activityOverview, activityisJoined, activityJoin, exchange } from '@/api/index.js';
	import { onLoad, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app';
	import { timeFormat } from '@/node_modules/uview-plus';
	import util from '@/util/share.js';

	// 页面参数
	let props = ref({});
	const ruleShow = ref(false);

	// 跳转更多
	const hanldeMore = () => {
		uni.navigateTo({
			url: `/pages/activity/ticket-liist/ticket-liist?activity_id=${info.value.id}`
		})
	}

	// 领取积分
	const hanldeReceive = (item) => {
		if (overview.value.account?.amount > item.cost_points) {
			exchange({ activity_exchange_id: item.id }).then(res => {
				if (res?.code == 200) {
					uni.$u.toast('领取成功');
				}
			})
		} else {
			uni.$u.toast('积分不足');
		}
	}

	onLoad((option) => {
		props.value = option;
		getActivityDetail(option.activity_id);
		if (uni.getStorageSync('jwt_token').token) {
			getActivityJoin(option.activity_id);
		}
	})

	// 分享
	onShareAppMessage(() => {
		return util.onShare({
			path: `/pages/activity/benefit/benefit?activity_id=${info.value.id}`,
			activityId: info.value.id
		})
	})

	// 分享朋友圈
	onShareTimeline(() => {
		let uid = "";
		if (uni.getStorageSync('userId')) {
			uid = uni.getStorageSync('userId');
		}
		let imageUrl = uni.getStorageSync('shareCover');

		return {
			query: `uid=${uid}&ref=wxmini_user_share&activity_id=${info.value.id}`,
			title: "心宇利家政",
			imageUrl: imageUrl
		}
	})

	// 获取是否参加活动
	const isjoin = ref(2)
	const getActivityJoin = (activityId) => {
		activityisJoined({
			activity_id: activityId
		}).then(res => {
			if (res.code == 200) {
				isjoin.value = res.data.joined;
			}
		})

		activityOverview({ activity_id: activityId }).then(res => {
			overview.value = res.data;
		});
	}

	const hanldeActivityJoin = () => {
		activityJoin({
			activity_id: props.value.activity_id
		}).then(res => {
			if (res?.code == 200) {
				uni.$u.toast('参加成功');
				isjoin.value = 1;
			}
		})
	}

	// 活动数据
	const info = ref({});
	const custom = ref({});

	// top_bg
	const backgroundTopStyle = computed(() => {
		return {
			backgroundImage: `url(${info?.value.bg?.main_top})`,
			backgroundSize: 'cover',
			backgroundPosition: 'center',
		};
	});

	// bottom_bg
	const backgroundBottomStyle = computed(() => {
		return {
			backgroundImage: `url(${info?.value.bg?.main_bottom})`,
			backgroundSize: 'cover',
			backgroundPosition: 'center',
		};
	});

	const overview = ref({});
	const task_gifts = ref([]);
	const exchanges = ref([]);
	const exchNum = ref(0);
	const getActivityDetail = async (activityId) => {
		// 获取详情
		let { data } = await activityDetail({ activity_id: activityId })
		info.value = data.info;
		task_gifts.value = data.task_gifts;
		exchNum.value = data.exchanges.length;
		exchanges.value = data.exchanges.slice(0, 2);
	}

	const hanldeInvitLog = () => {
		uni.navigateTo({
			url: '/pages/activity/invite-log/invite-log?activity_id=' + props.value.activity_id
		})
	}
</script>

<style scoped lang="scss">
	.rule-box {
		position: relative;
		width: 100%;
		height: 600rpx;

		image {
			position: absolute;
			z-index: 1;
			width: 100%;
			height: 100%;
			left: 0rpx;
			top: 0rpx;
		}

		.ruleText {
			position: absolute;
			width: 100%;
			height: 100%;
			z-index: 2;
			left: 0rpx;
			top: 0rpx;
			padding: 30rpx 40rpx 0 40rpx;
			box-sizing: border-box;
			color: #7F2C20;
		}
	}

	.close {
		width: 60rpx;
		height: 60rpx;
		border: 4rpx solid #fff;
		padding: 5rpx;
		box-sizing: border-box;
		border-radius: 50%;
		margin-top: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		image {
			display: block;
			width: 35rpx;
			height: 35rpx;
		}
	}

	.right-text {
		flex-grow: 1;
	}

	.custom-button {
		width: 100%;
		background: white;
		border-radius: 50rpx;
		/* 取消背景 */
		border: none;
		/* 取消边框 */
		color: inherit;
		/* 继承父元素的文字颜色 */
		font-size: 16px;
		/* 自定义字体大小 */
		padding: 0;
		/* 取消内边距 */
		box-shadow: none;
		text-align: initial;
		outline: none;
		margin: 0;
		/* position: static; */
		line-height: normal;
	}

	.right {
		display: block;
		width: 52rpx;
		height: 137rpx;
	}

	.reward {
		background: linear-gradient(180deg, #FFF5E1 0%, #FED37D 100%);
		color: #DB964A;
		border-radius: 16rpx 0 0 16rpx;
		width: 140rpx;
		flex-shrink: 0;
	}

	.coupon-box {
		width: 307rpx;
		height: 137rpx;
		position: relative;
		gap: 8rpx;
		// margin-right: 16rpx;

		image {
			display: block;
			position: absolute;
			z-index: 1;
			width: 100%;
			height: 100%;
		}

		.title {
			color: #FA2D1F;
		}

		.coupon-button {
			width: 76rpx;
			height: 76rpx;
			background: linear-gradient(180deg, #FFF5E1 0%, #FED37D 100%);
			padding: 10rpx;
			box-sizing: border-box;
			border-radius: 50rpx;
			color: #FA2D1F;
			font-size: 24rpx;
			flex-shrink: 0;
			margin-left: 10rpx;
		}

		.coupon-view {
			position: absolute;
			z-index: 2;
			padding: 20rpx;
			box-sizing: border-box;
			height: 137rpx;
		}
	}

	.rule {
		width: 158rpx;
		height: 58rpx;
		background: rgba(0, 0, 0, .3);
		border-radius: 20rpx 0 0 20rpx;
		font-size: 22rpx;
		color: wheat;
		text-align: center;
		line-height: 58rpx;
		position: fixed;
		right: 0rpx;
		top: 200rpx;
	}

	.bg {
		background: #eebc79;
		min-height: 100vh;
	}

	.activity-top {
		width: 100%;
		height: 1205rpx;
		background-size: 100% 100%;
	}

	.activity-text {
		border: 1rpx solid black;
		position: relative;
	}

	.activity-title {
		width: 200rpx;
		position: absolute;
		text-align: center;
		left: 50%;
		transform: translate(-50%, -100%);
		background: #eebc79;
	}

	.activity-bottom {
		width: 100%;
		height: 315rpx;
		position: fixed;
		bottom: 0rpx;
		left: 0rpx;
	}

	.activity-center {
		margin-top: -550rpx;
		position: relative;
		z-index: 1;
		padding-bottom: 100rpx;
	}

	.button {
		width: 100%;
		background: linear-gradient(180deg, #FFF5E1 0%, #FED37D 100%);
		text-align: center;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		border-radius: 50rpx;
		color: #FA2D1F;
		font-weight: 500;
		font-size: 40rpx;
		font-style: normal;
	}

	.button2 {
		width: 158rpx;
		height: 58rpx;
		background: rgba(0, 0, 0, .3);
		border-radius: 20rpx 0 0 20rpx;
		font-size: 22rpx;
		color: wheat;
		text-align: center;
		line-height: 58rpx;
		position: fixed;
		right: 0rpx;
		top: 260rpx;
	}
</style>